<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: 星星在唱歌
  Date: 2022/3/15
  Time: 14:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/bootstarp/bootstrap.css">
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/statics/bootstarp/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/statics/bootstarp/bootstrap-paginator.js"></script>
</head>
<body>
<div class="container">
    <h1 class="page-header">帖子列表</h1>
    <br><br>
    <div style="text-align: center">
        <form action="/invitation/main" method="post" name="form1" class="form-inline">
            <div class="form-group">
                <input type="hidden" name="pageNum" id="pageNum">
                <label for="" class="">帖子标题:</label>
                <input type="text" name="searchTitle" id="" class="form-control" placeholder="请输入标题"
                       value="${searchTitle}">
            </div>
            <input type="submit" value="查询" class="btn btn-primary">
        </form>
    </div>
    <div>
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>标题</th>
                <th>内容摘要</th>
                <th>作者</th>
                <th>发布时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach items="${pageInfo.list}" var="inv">
                <tr>
                    <td>${inv.title}</td>
                    <td>${inv.summary}</td>
                    <td>${inv.author}</td>
                    <td>
                        <fmt:formatDate value="${inv.createdate}" pattern="yyyy-MM-dd"/>
                    </td>
                    <td>
                        <a class="btn btn-info" href="javascript:toShow(${inv.id})">查看回复</a>
                        <a class="btn btn-danger" href="javascript:toDel(${inv.id})">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
    <div style="text-align: center">
            <!--分页组件-->
            <ul id="page"></ul>
    </div>
</div>

<%--分页插件--%>

<script>
    /*jquery的入口函数*/
    $(function () {
        //获取当前页
        var currentPage = ${pageInfo.pageNum};
        //获取总页数
        var totalPages = ${pageInfo.pages};
        $("#page").bootstrapPaginator({
            bootstrapMajorVersion: 3, //对应的bootstrap版本
            currentPage: currentPage, //当前页数
            numberOfPages: 10, //每次显示页数
            totalPages: totalPages, //总页数
            useBootstrapTooltip: false,
            itemTexts: function (type, page, current) {//设置分页按钮显示字体样式
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                console.log(page);
                // 业务处理
                //page: 表示当前页码
                /*获取pageNum隐藏域，给它赋值 page*/
                $("#pageNum").val(page);
                /*提交表单*/
                document.form1.submit();
            }
        });
    });

    function toShow(id){
        window.location.href = "/replyDetail/main/"+id;
    }

    function toDel(id){
        if(confirm("是否删除？将会删除帖子以及所有回复,该操作将不可逆！")){
            window.location.href = "/invitation/del/"+id;
        }
    }

    <c:if test="${del == 'ok'}">
    alert("删除成功！")
    </c:if>
    <c:if test="${del == 'no'}">
    alert("删除失败！")
    </c:if>

</script>
</body>
</html>
